<template>
	<view>
		<navBar></navBar>
		<view class="home-page-main webkit-scrollbar">
			<view class="content">
				<match-media :min-width="768">
					<view class="swiper-box">
						<swiper class="swiper" :current="(swiperCurrentLeft+1)" :duration="300" disable-touch circular
							autoplay>
							<swiper-item v-for="item, bannerIndex in homeData.banner" :key="'banner1'+bannerIndex">
								<image :src="item.image" class="swiper-item" mode=""></image>
							</swiper-item>
						</swiper>
						<view class="right">
							<view class="up" @click="updown('up')"></view>
							<view class="down" @click="updown('down')"></view>

							<swiper v-if="homeData && homeData.banner" class="swiper-y" @change="getCurrentIndex"
								next-margin="-32rpx" :current="swiperCurrentLeft" :duration="300"
								display-multiple-items="3" disable-touch circular autoplay vertical>
								<!-- <swiper-item class="swiper-item-y"
									:class="(swiperCurrentLeft+1)==bannerIndex||(swiperCurrentLeft==index.banner.length-1&&bannerIndex==0)?'':'dark'"
									v-for="(item,bannerIndex) in index.banner" :key="'banner2'+bannerIndex">
									<image :src="item.image" mode=""></image>
								</swiper-item> -->
								<swiper-item class="swiper-item-y"
									:class="(swiperCurrentLeft+1 === homeData.banner.length? 0 : swiperCurrentLeft+1) === bannerIndex?'':'dark'"
									v-for="(item,bannerIndex) in homeData.banner" :key="'banner2'+bannerIndex">
									<view class="swiper_coupon-wrap">
										<image :src="item.image" mode="" class="swiper_coupon-content"></image>
									</view>
								</swiper-item>

							</swiper>
						</view>
					</view>
					<view class="search">
						<view class="searchInputBox" :style="{zIndex:isFocus?8:0}">
							<uni-easyinput prefixIcon="search" v-model="inputClearValue" @focus="isFocus = true"
								@input="inputSearchGame" :placeholder="$t('Page.home.ssyx')"
								@clear="searchGameList = []"></uni-easyinput>
							<view class="searchGameListBox webkit-scrollbar" v-if="isFocus">
								<view class="searchTips" v-if="!searchGameList.length"> At least 3 characters are
									required to search. </view>
								<view class="slot_list" v-else>
									<view class="slot_item " v-for="gameItem,gameIndex in searchGameList"
										:key="'game'+gameIndex">
										<adaptCar :src="gameItem.gamepic" :isMaintain="gameItem.catestatus === 'mainte'"
											@onTap="clickGameurl(gameItem,gameIndex)"></adaptCar>
										<!-- <view class="ac_coupon-wrap solt_image">
													<image :src="gameItem.gamepic" class="ac_coupon-content"></image>
												</view> -->
										<!-- <view class="shadow">
												<image class="shadow-image" src="@/static/image/playCircle.png" mode="">
												</image>
											</view> -->
										<view>{{ gameItem.gameName }}</view>
									</view>
								</view>
							</view>
						</view>
						<uni-transition mode-class="fade" :show="isFocus">
							<view class="dialog__backdrop" @click.prevent.stop="isFocus = false"></view>
						</uni-transition>
						<!-- <uni-icons type="search" size="25" color="#2b333b"></uni-icons>
						<input class="uni-input input" placeholder="Search game" :value="inputClearValue"
							@input="clearInput" /> -->
					</view>
				</match-media>
				<view class="tab_box" v-if="homeData && homeData.gamecate">
					<view class="btn_group">
						<waves :class="['tab_item', tabCurrent == gamecateIndex ? 'tab_active' : '']"
							v-for="(item,gamecateIndex) in homeData.gamecate"
							@onTap="gamecateChange(item,gamecateIndex)" :key="'gamecate'+gamecateIndex">
							<image :src="item.gameicooff" class="gamecateImage"></image>
							<text class="tab_text">{{item.name}}</text>
						</waves>
					</view>
				</view>

				<view class="selection" v-for="getGameitem, getGameIndex in showGetGame" :key="'getGame'+getGameIndex">
					<view class="more">
						<waves itemClass="slot">
							<image :src="getGameitem.gameicooff" style="width:25px;height: 25px;"></image>
							<text>{{getGameitem.name}}</text>
						</waves>
						<waves class="game-more" :wavesHover="false" @onTap="clickMore(getGameitem, getGameIndex)">
							<text class="more-text">{{$t(`Page.home.more`)}} </text>
							<uni-icons custom-prefix="iconfont" type="icon-gengduo2" color="#fff" size="16"></uni-icons>
						</waves>
					</view>
					<view class="slot_list">
						<view class="slot_item " v-for="gameItem,gameIndex in getGameitem.list" :key="'game'+gameIndex">
							<adaptCar :src="gameItem.gamepic" :isMaintain="gameItem.catestatus === 'mainte'"
								@onTap="clickGameurl(gameItem,gameIndex)"></adaptCar>

							<view>{{ gameItem.game_name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-transition mode-class="fade" :duration="100" :show="isMessage">
			<view class="ant-modal-mask" @click.prevent="msgCurrent++">
				<view class="msgBox" v-for="item,index in homeData.message" :key="'msg' + index"
					v-if="msgCurrent === index">
					<view class="title">
						{{ item.title }}
						<waves class="closeBtn" @onTap="msgCurrent++">X</waves>
					</view>
					<rich-text :nodes="item.content" class="richText"></rich-text>
					<view class="pagingBox">
						<waves class="pagingBtn last" :isDisable="msgCurrent <= 0" @onTap="lastMsg"> {{ '<' }} </waves>
						<waves :class="['pagingBtn', msgCurrent===index?'pagingActive':'' ]"
							v-for="item,index in homeData.message" :key="'paging' + index" @onTap="msgCurrent = index">
							{{ index + 1 }}
						</waves>
						<waves class="pagingBtn next" :isDisable="msgCurrent >= homeData.message - 1" @onTap="nextMsg">
							{{ '>' }}
						</waves>
					</view>
				</view>
			</view>
		</uni-transition>
		<match-media :max-width="MAX_SIZEiZE">
			<tabBar :showselected="true"></tabBar>
		</match-media>
	</view>
</template>
<script>
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		goGamePang
	} from '@/utils/routerJump.js'
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				msgCurrent: 0,
				isFocus: false,
				MAX_SIZEiZE,
				swiperCurrentLeft: 0,
				swiperCurrentRight: 0,
				tabCurrent: 0,
				inputClearValue: '',
				current: 0,
				indexPage: [{
					tabBar: '/pages/tabBar/component/component',
					index: '/pages/component/view/view'
				}, {
					tabBar: '/pages/tabBar/API/API',
					index: '/pages/API/set-navigation-bar-title/set-navigation-bar-title'
				}, {
					tabBar: '/pages/tabBar/extUI/extUI',
					index: '/pages/extUI/badge/badge'
				}, {
					tabBar: '/pages/tabBar/template/template',
					index: '/pages/template/nav-button/nav-button'
				}],
				disUpDown: false,
				searchGameList: []
			}
		},

		computed: {
			...mapState({
				homeData: state => state.app.homeData,
				getGame: state => state.app.getGame,
				mycolect: state => state.app.mycolect
			}),
			...mapGetters('app', ['isLogin']),
			isMessage() {
				console.log(this.homeData?.message?.length, this.msgCurrent, this.homeData.message.length)
				if (this.homeData?.message?.length && this.msgCurrent < this.homeData.message.length) {
					return true
				}
				return false
			},
			showGetGame() {
				try {
					let id = this.homeData.gamecate[this.tabCurrent].id
					let result = null
					for (let key in this.getGame) {
						this.getGame[key].list.forEach(item => item.catestatus = this.getGame[key].status)
					}
					if (this.getGame[id]) {
						result = {
							[id]: this.getGame[id]
						}
					} else {
						result = this.getGame
					}
					if (this.isLogin && this.mycolect?.list?.length) { // 登录了才有收藏的数据
						return {
							0: {
								id: 0,
								name: "Favourites",
								list: this.mycolect.list.slice(0, 6),
								gameicooff: require('@/static/collect.png')
							},
							...result
						}
					} else {
						return result
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e, '首页游戏列表异常')
				}

			}
		},
		onLoad() {
			// 首页数据初始化
			this.homeInit()
			setTimeout(() => {
				console.log("homeData: ", this.homeData);
			}, 1000)
		},
		mounted() {},
		methods: {
			...mapActions('app', ['homeInit']),
			lastMsg() {
				if (this.msgCurrent <= 0) return
				this.msgCurrent++
			},
			nextMsg() {
				if (this.msgCurrent >= this.homeData?.message?.length) return
				this.msgCurrent++
			},
			clickMore(item, index) {
				uni.navigateTo({
					url: `/pages/component/cate-game/cate-game?item=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			inputSearchGame(value) {
				if (value && value.length >= 3) {
					sendMessage({
						flag: this.$api.GAMEINDEX,
						content: {
							gamename: value
						}
					})
					uni.$once(this.$api.GAMEINDEX, (res) => {
						if (res.code === 1) {
							this.searchGameList = res?.data?.list || []
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			clickGameurl(item, index) {
				console.log(JSON.parse(JSON.stringify(item)))
				goGamePang({
					id: item.id,
					name: item.game_name,
					namecode: item.namecode,
					gamepic: item.gamepic
				})
			},
			gamecateChange(item, index) {
				this.tabCurrent = index
			},
			updown(type) { //上下切换轮播图
				if (this.disUpDown) return
				this.disUpDown = true
				let swiperCurrentLeft = this.swiperCurrentLeft
				0, 4
				console.log(swiperCurrentLeft, this.homeData.banner.length)
				if (type == 'up') {
					if (swiperCurrentLeft <= 0) {
						this.swiperCurrentLeft = 0
					} else {
						this.swiperCurrentLeft--
					}
				} else {
					if (swiperCurrentLeft >= this.homeData.banner.length - 1) {
						this.swiperCurrentLeft = 0
					} else {
						this.swiperCurrentLeft++
					}
				}
				setTimeout(() => {
					this.disUpDown = false
				}, 600)
				console.log(this.swiperCurrentLeft);
			},
			changeLeftIndex(index, item) {
				if (index == 0) {
					return this.swiperCurrentLeft = 5
				}
				this.swiperCurrentLeft = parseInt(index) - 1
				console.log(index);
			},
			getCurrentIndex(e) {
				this.swiperCurrentLeft = e.detail.current
			},
			clearInput: function(event) {
				this.inputClearValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			toSecondMenu(e) {
				const activeTabBar = '/' + e.pagePath
				for (const item of this.indexPage) {
					if (activeTabBar === item.tabBar) {
						uni.redirectTo({
							url: item.index
						})
					}
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.home-page-main {
		height: 100vh;
		animation-name: fadeIn;
		animation-duration: 0.8s;
		padding: 66px 32px 16px;
		padding-top: calc(var(--status-bar-height) + 66px + 32px);
		background: var(--bg-3);
		color: #fff;
		overflow-y: auto;
		margin: auto;
		box-sizing: border-box;
		position: relative;
	}

	@media screen and (max-width: 768px) {
		.home-page-main {
			padding: 50px 32rpx 16rpx;
			padding-top: calc(var(--status-bar-height) + 50px);
			/* height:auto; */
			/* height: calc(100vh - 110px); */
		}
	}

	.content {
		max-width: 1200px;
		margin: auto;
		padding-bottom: 50px;
	}

	.swiper-box {
		height: 357px;
		display: flex;
		justify-content: center;
	}

	.uni-margin-wrap {
		width: 60%;
	}

	.swiper-right {
		width: 30%;
		height: 363px;
		flex-shrink: 0;
		overflow: hidden;
		padding-left: 32px;
	}

	/* .swiper {
		height: 363px;
	}
	 */

	.swiper {
		// width:900rpx;
		width: 60%;
		height: 100%;
		border-radius: 16px;
		overflow: hidden;
		cursor: pointer;
	}

	.right {
		width: 30%;
		// height: 714rpx;
		overflow: hidden;
		position: relative;
		padding-left: 32px;

		.up {
			width: calc(100% - 32px);
			height: 33.3%;
			// height: 224rpx;
			// background-color: white;
			position: absolute;
			top: 0;
			// opacity: 0.3;
			z-index: 2;
			cursor: pointer;
		}

		.down {
			width: calc(100% - 32px);
			height: 32%;
			// background-color: white;
			position: absolute;
			bottom: 0;
			// opacity: 0.3;
			z-index: 2;
			cursor: pointer;
		}
	}

	.swiper-y {
		// width:600rpx;
		// margin-top: -74rpx;
		// width: 40%;

		height: 100%;
		cursor: pointer;

		// /deep/ swiper-item {
		// 	height: 266rpx !important;
		// 	line-height: 266rpx !important;
		// 	padding-bottom: 32rpx;
		// 	// margin-bottom: 32rpx;
		// 	// padding-top: 10px;
		// }

		// image {
		// 	width: 100%;
		// 	height: 266rpx;
		// 	border-radius: 16px;
		// 	// padding-bottom: 32rpx;
		// }
	}

	.swiper-item {
		display: block;
		height: 714rpx;
		line-height: 714rpx;
		text-align: center;
		border-radius: 16px;
		width: 100%;

		cursor: pointer;
	}

	.swiper-item-y {
		display: block;
		// height: 266rpx;
		// line-height: 266rpx;
		text-align: center;
		border-radius: 16px;
		cursor: pointer;
		// padding-bottom: 20px;
	}

	.dark {
		opacity: 0.3;
	}




	// .swiper-item {
	// 	display: block;
	// 	height: 363px;
	// 	line-height: 363px;
	// 	text-align: center;
	// 	border-radius: 16px;
	// }

	.img {
		width: 100%;
		height: 266rpx;
		border-radius: 16px;
	}

	.swiper-item-shadow {
		position: absolute;
		width: 100%;
		height: 117px;
		background: rgba(0, 0, 0, 0.4);
		top: 0;
		border-radius: 16px;
	}

	.swiper-item-right {
		border-radius: 16px;
		height: 117px;
		line-height: 117px;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.placeholder {
		height: 60px;
	}

	.search {
		.searchInputBox {
			position: relative;
			z-index: 8;

			.searchGameListBox {
				position: absolute;
				margin-top: 8px;
				width: 100%;
				height: 350px;
				background: #2b333b;
				padding: 8px 8px;
				// z-index: 11;
				border-radius: 1rem;
				overflow: auto;

				.searchTips {
					color: #adadc2;
					padding-top: 24px;
					padding-bottom: 24px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.dialog__backdrop {
			width: 100vw;
			height: 100%;
			z-index: 7;
			background: rgba(32, 38, 45, 0.7);
			position: fixed;
			top: 0;
			left: 0;
			margin: 0 !important;
			pointer-events: all;
		}

		/deep/.uni-easyinput__content {
			margin-top: 16px;
			color: #fff !important;
			border: 2px solid transparent !important;
			background: #2b333b !important;
			border-radius: 28px;

			&:hover {
				border: 2px solid #000 !important;
			}
		}

		/deep/.is-focused {
			border: 2px solid #557086 !important;
		}
	}

	.input {
		background-color: transparent;
		padding-left: 5px;
	}

	.btn_group {
		/* max-width: 100%; */
		background: #2b333b;
		padding: 4px 4px;
		vertical-align: middle;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
		display: inline-flex;
		flex-wrap: nowrap;
		margin-top: 45rpx;
		border-radius: 28px;
	}

	@media screen and (max-width: 768px) {
		.btn_group {
			margin-top: 0rpx;
		}
	}

	.tab_box {
		/* border-radius: 28px; */
		max-width: calc(100vw - 64rpx);
		overflow-x: scroll;
		line-height: 1.5;
	}

	.tab_box::-webkit-scrollbar {
		height: 10rpx;
		width: 4rpx;
	}

	.tab_box::-webkit-scrollbar-thumb {
		background: #557086;
		border-radius: 10rpx;
	}

	.more {
		height: 32px;
		line-height: 32px;
		margin-top: 24px;
		display: flex;
		justify-content: space-between;
	}

	.slot {
		display: flex;
		align-items: center;
		border: 3px;
	}

	.game-more {
		display: flex;
		align-items: center;

		.more-text {
			margin-right: 8px;
		}
	}

	.slot_list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		/* flex-wrap: wrap; */
		gap: 16px;
	}

	@media screen and (max-width: 768px) {
		.slot_list {
			display: grid;
			grid-template-columns: repeat(3, calc(33.3% - 10rpx));
			/* flex-wrap: wrap; */
			gap: 16rpx;
		}

		.solt_image {
			max-height: 260rpx !important;
		}

		.height {
			height: 60px !important;
		}
	}

	.slot_item {
		width: 100%;
		border-radius: 16px;
		/* margin-right: 30rpx; */
	}

	.height {
		height: 80px;
	}

	// .solt_shadow {
	// 	position: relative;
	// 	border-radius: inherit;
	// 	overflow: hidden;
	// }

	.swiper_coupon-wrap {
		height: 117px;
		// padding-top: 62%;
		position: relative;
		// padding-bottom: 20px;

		.swiper_coupon-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			border-radius: 16px;
		}
	}

	.ac_coupon-wrap {
		height: 0;
		padding-top: 100%;
		position: relative;

		.ac_coupon-content {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
		}
	}

	.solt_image {
		width: 100%;
		border-radius: inherit;
		transition: all .3s;
	}

	.shadow {
		opacity: 0;
		display: none;

		.shadow-image {
			width: 42px;
			height: 42px;
		}
	}

	@keyframes scaleImage {
		from {
			transform: scale(1.3);
			background: rgba(0, 0, 0, 0);
		}

		to {
			transform: scale(1);
			background: rgba(0, 0, 0, 0.4);
		}
	}

	@keyframes scaleBox {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(1.1);
		}
	}


	/* #ifdef H5 */
	// .solt_shadow:hover .ac_coupon-wrap {
	// 	animation: scaleBox 0.25s ease 0s 1 normal forwards running;
	// }

	// .solt_shadow:hover .solt_image {
	// 	transform: scale(1.2);
	// }

	// .solt_shadow:hover .shadow {
	// 	opacity: 1;
	// 	width: 100%;
	// 	height: 100%;
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	background: rgba(0, 0, 0, 0.4);
	// 	cursor: pointer;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	z-index: 1;
	// 	border-radius: inherit;
	// 	animation: scaleImage 0.25s ease 0s 1 normal forwards running;
	// }

	/* #endif */

	.tab_item {
		border-radius: inherit;
		padding: 4px 16px;
		display: flex;
		align-items: center;
		/* #ifdef H5 */
		min-height: 2.572em;
		cursor: pointer;

		/* #endif */
		.gamecateImage {
			width: 16px;
			height: 16px;
		}

		// transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
	}

	.tab_active {
		background-color: #20262d;
	}

	.tab_text {
		margin-left: 5px;
		font-size: 28rpx;
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
	}

	.ant-modal-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 4000;
		width: 100% !important;
		height: 100%;
		overflow: scroll;
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.45);
		-webkit-backdrop-filter: saturate(180%) blur(5px);
		backdrop-filter: saturate(180%) blur(5px);

		.msgBox {
			width: 30rem;
			background: rgb(53, 68, 82);
			border-radius: 1rem;
			margin-top: 48px;
			margin-bottom: 48px;
			margin-left: 16px;
			margin-right: 16px;
			padding: 4px 4px;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
			vertical-align: top;

			.title {
				position: relative;
				padding: 16px;
				color: #42a5f5 !important;
				font-size: 1.125rem;
				text-align: center;

				.closeBtn {
					width: 1.715em;
					height: 1.715em;
					min-height: unset;
					line-height: 1.715em;
					text-align: center;
					position: absolute;
					border-radius: 100%;
					right: -14px;
					top: -14px;
					background: #1e232a;
					color: #557086;
				}
			}

			.richText {
				/deep/img {
					width: 100% !important;
				}
			}

			.pagingBox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 16px 16px;

				.pagingBtn {
					min-width: 2em;
					min-height: unset;
					color: #1976D2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 3px;
					font-weight: 500;
				}

				.pagingActive {
					background: #1976D2;
					color: #fff;
				}
			}
		}
	}
</style>